<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Tables - Ace Admin</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/font-awesome.min.css" />
		<%-- <link href="${pageContext.request.contextPath }/static/assets/css/bootstrap-theme.css" rel="stylesheet"/> --%>
		<!-- page specific plugin styles -->
		<!-- text fonts -->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-fonts.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace.min.css" id="main-ace-style" />
		<!--[if lte IE 9]>
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-part2.min.css" />
		<![endif]-->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-rtl.min.css" />
		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-ie.min.css" />
		<![endif]-->
		<!-- inline styles related to this page -->
		<!-- ace settings handler -->
		<script src="${pageContext.request.contextPath }/static/assets/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="${pageContext.request.contextPath }/static/assets/js/html5shiv.min.js"></script>
		<script src="${pageContext.request.contextPath }/static/assets/js/respond.min.js"></script>
		<![endif]-->
		
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/bootstrap-datetimepicker.css" />
		<script type="text/javascript" src="${pageContext.request.contextPath }/static/lib/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/static/assets/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/static/lib/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/static/lib/bootstrap-datetimepicker.zh-CN.js"></script>
		
		<!-- 表单手动赋值 -->
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/common/manualAssignment.js"></script>
		
		<style type="text/css">
			#sample-table-1 tbody tr td{
				white-space:nowrap;overflow:hidden;text-overflow: ellipsis;height:25px;
			}
		</style>
		
		<script type="text/javascript">
		
			var id;//删除学生的ID
			function _delete(uid,uname){
				$("#deleteMsg").html("确定删除[<font color='red'>"+uname+"</font>]学生信息吗?");
				id = uid;
				$('#deleteModal').modal({
					backdrop:'static'
				});
			}
			function _delete2(){
				window.location = "${pageContext.request.contextPath }/user/delete/"+id;
			}
			
			// 显示添加模态框
			function _toAdd(){
				$(".user_id").val("")
				$(".user_name").val("")
				$(".birthday").val("")
				$(".tel").val("")
				$(".address").val("")
				
				$(".user_id").attr("placeholder","ID")
				$(".user_name").attr("placeholder","Name")
				$(".birthday").attr("placeholder","Birthday")
				$(".tel").attr("placeholder","Telephont")
				$(".address").attr("placeholder","Address")
				$(".gender").prop("checked",false)
				
				$("#addForm").attr("action","add")
				$("#addOrEditTitle").html("添加页面")
				$("#addOrEditButton").html("添加")
				$("#user_id").attr("readonly",false)
				$('#addOrEditModal').modal({
					backdrop:'static'
				});
			}
			
			// 显示批导入模态框
			function _toBatchAdd(){
				$('#batchModal').modal({
					backdrop:'static'
				});
			}
			
			/* 日历 */
			$("#date").datetimepicker({
			       format: "yyyy-mm-dd",
			       autoclose: true,
			       todayBtn: true,
			       todayHighlight: true,
			       showMeridian: true,
			       pickerPosition: "bottom-left",
			       language: 'zh-CN',//中文，需要引用zh-CN.js包
			       startView: 2,//月视图
			       minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
			    });
			
			 /* Ajax后台校验用户ID是否存在 */
			 $("#user_id").blur(function(){
				 if ($("#F_userform").attr("action") == "add"){
					 var id =  $("#user_id").val();
						$.post(
							"${pageContext.request.contextPath }/user/checkUserId",
							{"user_id":id},
							function(data){
								/* 如果用户输入的ID不可用【已存在】给出提示信息*/
								if(!data.flag){
									$("#UserIdMSG").html("<font color='red'>ID已存在</font>");
									return false;
								}else{
									$("#UserIdMSG").html("");
									return true;
								}
							},
							'json'
						);
				 }
			 });
			
			// 显示修改页面数据
			function _toEdit(user_id){
				$("#addForm").attr("action","edit/"+user_id)
				$("#addOrEditTitle").html("修改页面")
				$("#addOrEditButton").html("修改")
				$("#user_id").attr("readonly","readonly")
				$('#addOrEditModal').modal({
					backdrop:'static'
				});
				
				//手动填充数据
				$.get(
						"${pageContext.request.contextPath }/user/edit/"+user_id,
						function(data){
							setValue(data)
						},
						"json"
					)
			}
			
		</script>
	</head>

	<body class="no-skin">
		<!-- #section:basics/content.breadcrumbs -->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>
	
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="#">Home</a>
				</li>
	
			</ul><!-- /.breadcrumb -->
	
			<!-- #section:basics/content.searchbox -->
			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon">
						<input type="text" placeholder="Search ${pageContext.request.contextPath }/static." class="nav-search-input" id="nav-search-input" autocomplete="off" />
						<i class="ace-icon fa fa-search nav-search-icon"></i>
					</span>
				</form>
			</div><!-- /.nav-search -->
	
			<!-- /section:basics/content.searchbox -->
		</div>
	
		<!-- /section:basics/content.breadcrumbs -->
		<div class="page-content">
			<!-- #section:settings.box -->
			<div class="ace-settings-container" id="ace-settings-container">
				<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
					<i class="ace-icon fa fa-cog bigger-150"></i>
				</div>
	
				<div class="ace-settings-box clearfix" id="ace-settings-box">
					<div class="pull-left width-50">
						<!-- #section:settings.skins -->
						<div class="ace-settings-item">
							<div class="pull-left">
								<select id="skin-colorpicker" class="hide">
									<option data-skin="no-skin" value="#438EB9">#438EB9</option>
									<option data-skin="skin-1" value="#222A2D">#222A2D</option>
									<option data-skin="skin-2" value="#C6487E">#C6487E</option>
									<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
								</select>
							</div>
							<span>&nbsp; Choose Skin</span>
						</div>
	
						<!-- /section:settings.skins -->
	
						<!-- #section:settings.navbar -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
							<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
						</div>
	
						<!-- /section:settings.navbar -->
	
						<!-- #section:settings.sidebar -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
							<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
						</div>
	
						<!-- /section:settings.sidebar -->
	
						<!-- #section:settings.breadcrumbs -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
							<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
						</div>
	
						<!-- /section:settings.breadcrumbs -->
	
						<!-- #section:settings.rtl -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
							<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
						</div>
	
						<!-- /section:settings.rtl -->
	
						<!-- #section:settings.container -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
							<label class="lbl" for="ace-settings-add-container">
								Inside
								<b>.container</b>
							</label>
						</div>
	
						<!-- /section:settings.container -->
					</div><!-- /.pull-left -->
	
					<div class="pull-left width-50">
						<!-- #section:basics/sidebar.options -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" />
							<label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
						</div>
	
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" />
							<label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
						</div>
	
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" />
							<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
						</div>
	
						<!-- /section:basics/sidebar.options -->
					</div><!-- /.pull-left -->
				</div><!-- /.ace-settings-box -->
			</div><!-- /.ace-settings-container -->
	
			<!-- /section:settings.box -->
			<div class="page-content-area">
				<div class="page-header">
					<h1>
						功能
						<small>
							<i class="ace-icon fa fa-angle-double-right"></i>
							学生资料管理 &amp; 学生资料显示
						</small>
					</h1>
				</div><!-- /.page-header -->
	
				<c:if test="${not empty message}">
					<!-- 信息提示框 -->
					<div class="alert alert-success alert-dismissable">
					    <button type="button" class="close" data-dismiss="alert">&times;</button>
					    <strong>信息提示：</strong> ${message }
					 </div>
				</c:if>
	
				<div class="row">
					<div class="col-xs-12">
						<!-- PAGE CONTENT BEGINS -->
						<div class="row">
							<div class="col-xs-12">
								<table id="sample-table-1" class="table table-striped table-bordered table-hover">
									<thead>
										<tr>
										</tr>
										<tr>
											<th><spring:message code="user.id.message"></spring:message></th>
											<th><spring:message code="user.name.message"></spring:message></th>
											<th><spring:message code="user.gender.message"></spring:message></th>
											<th><spring:message code="user.birthday.message"></spring:message></th>
											<th><spring:message code="user.telephone.message"></spring:message></th>
											<th><spring:message code="user.address.message"></spring:message></th>
											<th>
												<a href="javascript:_toAdd();" class="glyphicon glyphicon-plus"></a>&nbsp;
												<a href="javascript:_toBatchAdd();" class="glyphicon glyphicon-open"></a>
											</th>
										</tr>
									</thead>
	
									<tbody>
										<c:if test="${empty page.datas}">
											<h1>表数据为空!</h1>
										</c:if>
										<c:forEach items="${page.datas }" var="user">
										<tr>
											<td>
												<span>${user.user_id }</span>
											</td>
											<td>
												<span>${user.user_name }</span>
											</td>
											<td>
												<c:if test="${user.gender eq '1'}">
													<span>男</span>
												</c:if>
												<c:if test="${user.gender eq '0'}">
													<span>女</span>
												</c:if>
											</td>
											<td>
												<span>${user.birthday }</span>
											</td>
											<td>
												<span>${user.tel }</span>
											</td>
											<td>
												<span>${user.address }</span>
											</td>
											<td>
												<a href="javascript:_toEdit('${user.user_id }');" class="glyphicon glyphicon-edit"></a>&nbsp;&nbsp;
												<a href="javascript:_delete('${user.user_id }','${user.user_name }');" class="glyphicon glyphicon-trash"></a>&nbsp;&nbsp;
											</td>
										</tr>
										</c:forEach>
									</tbody>
								</table>
								
							</div><!-- /.span -->
						</div><!-- /.row -->
	
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.page-content-area -->
		</div><!-- /.page-content -->
		<!-- 分页  -->
		<div class="modal-footer no-margin-top">
			<jsp:include page="/jsp/Common/page.jsp">
				<jsp:param name="url" value="users"/>   
				<jsp:param name="items" value="${page.totalSize}"/>
			</jsp:include>
		</div><!-- 分页结束 -->
			
		<!-- 删除Modal -->
		<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Message</h4>
		      </div>
		      <div class="modal-body">
		        <h3 id="deleteMsg">确定删除该学生信息吗</h3>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary" onclick="javascript:_delete2();">Delete</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		<!-- 添加/修改模态框 -->
		<div class="modal fade" id="addOrEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="addOrEditTitle">添加页面</h4>
		      </div>
		      <div class="modal-body">
		    	<form:form id="addForm" action="add" method="post" modelAttribute="user">
					<div class="row">
					    <label class="col-md-2 control-label text-right">Id</label>
					    <div class="col-md-8">
					      <form:input path="user_id" required="true" class="form-control user_id" placeholder="ID" id="user_id"/>
					      <form:errors path="user_id"></form:errors>
					      <span id="UserIdMSG"></span>
					    </div>
					 </div>
					 <div class="row">
					    <label class="col-md-2 control-label text-right">Name</label>
					    <div class="col-md-8">
					      <form:input path="user_name" required="true" maxlength="15" class="form-control user_name" placeholder="Name" />							      
					      <form:errors path="user_name"></form:errors>
					    </div>
					 </div>
					 
					 <div class="row">
					    <label class="col-md-2 control-label text-right">Gender</label>
					    <div class="col-md-8">
					      <form:radiobutton path="gender" value="1" class="gender" id="gender_1"/>男
					      <form:radiobutton path="gender" value="0" class="gender" id="gender_0"/>女
					      <form:errors path="gender"></form:errors>
					    </div>
					 </div>
					 <div class="row">
					    <label class="col-md-2 control-label text-right">Birthday</label>
					    <div class="col-md-8">
					      <form:input path="birthday" required="true" id="date" class="form-control birthday" placeholder="Birthday"/>
					      <form:errors path="birthday"></form:errors>
					    </div>
					 </div>
					 
					 <div class="row">
					    <label class="col-md-2 control-label text-right">Telephone</label>
					    <div class="col-md-8">
					     <form:input path="tel" required="true" maxlength="11" class="form-control tel" placeholder="Telephone" />
					     <form:errors path="tel"></form:errors>
					    </div>
					 </div>
					 <div class="row">
					    <label class="col-md-2 control-label text-right">Address</label>
					    <div class="col-md-8">
					      <form:input path="address" required="true"  class="form-control address" placeholder="Address" />
					      <form:errors path="address"></form:errors>
					    </div>
					 </div>
					 
					 <div class="row">
					    <label class="col-md-2 control-label text-right"></label>
					    <div class="col-md-2">
					      <button type="submit" class="btn btn-success" id="addOrEditButton">添加</button>
					    </div>
					    <div class="col-md-2">
					      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					    </div>
					</div>
				</form:form>
		      </div>
		      <div class="modal-footer">
		      </div>
		    </div>
		  </div>
		</div>
		
		<!-- 批量导入模态框 -->
		<div class="modal fade" id="batchModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		  		<form action="batchImport" method="post" enctype="multipart/form-data">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="myModalLabel">批量导入</h4>
			      </div>
			      <div class="modal-body">
			        <input type="file" name="file" required="true">
			      </div>
			      <div class="modal-footer">
			        <button type="submit" class="btn btn-primary" >导入</button>
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			      </div>
		  		</form>
		    </div>
		  </div>
		</div>	

	</body>
</html>
